<template>
	 <div class="">
		<div class="usertop bluebg">
			<span class="usubtit">个人资料</span>
		</div>
		<div class="userform">
			<el-form 
        ref="uform" 
  			:model="uform" 
        :rules="rules"
  			labelPosition="left"
  			label-width="80px"
			>
				  <!-- <el-form-item label="昵称">
				    <el-input v-model="username" ></el-input>
				  </el-form-item> -->
				  <el-form-item label="昵称" prop="username">
				    <el-input v-model="uform.username" ></el-input>
				  </el-form-item>
				  <el-form-item label="邮箱" prop="email">
				    <el-input v-model="uform.email" ></el-input>
				  </el-form-item>
				  <el-form-item label="手机号" prop="mobile">
				    <el-input v-model="uform.mobile" ></el-input>
				  </el-form-item>
				  <el-form-item label="性别" prop="sex">
				    <el-radio-group v-model="uform.sex" class="genderbox">
				      <el-radio label="0" >男</el-radio>
				      <el-radio label="1" >女</el-radio>
				    </el-radio-group>
				  </el-form-item>
				  <el-form-item label="密码" prop="pass">
				    <el-input placeholder="请输入新密码" v-model="uform.pass" show-password ></el-input>
				    </el-input>
				  </el-form-item>
				 
				  <el-form-item>
				    <el-button  @click="onSubmit('uform')" class="bluebtn">保存</el-button>
				    <!-- <el-button>取消</el-button> -->
				  </el-form-item>
				</el-form>


				      <i class="gendericon el-icon-male"></i>
              <i class="gendericon el-icon-female"></i>

		</div>
	 </div>
</template>
<script>
import storage from '../../../storage/index'
import axios from 'axios'
  export default {
    name: 'UserInfo',
    inject:['reload'],
     data() {
      return {
        uform: {
        	username:'',
        	sex:'',
        	email:'',
        	mobile:'',
          pass: ''
        },
        rules: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          mobile:[
                { required: true, message: '请输入电话号码', trigger: 'blur' },
                { len: 11, message: '请输入正确的手机号码', trigger: 'blur' }
          ],
          pass:[
            { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
          ]
        },
      }
    },
    computed:{
	   
	},
    methods: {
    	datainit(){
            this.uform.username = storage.get('username');
            this.$set(this.uform,'sex',storage.get('sex'));
            this.uform.email = storage.get('email');
            this.uform.mobile= storage.get('mobile');
    	},
     
      onSubmit(formName) {
       
        this.$refs[formName].validate((valid) => {
            if (valid) {
                let nickname = this.uform.username;
                let sex = this.uform.sex;
                let mobile = this.uform.mobile;
                let email = this.uform.email;
                let password = this.uform.pass;
                axios.post('member/update',{
                  nickname,
                  sex,
                  mobile,
                  email,
                  password,
                }).then((res)=>{
                    res = res.data
                    if (res.status==200) {
                      const data = res.data
                      alert('修改成功 ')
                      storage.set('username',nickname);
                      this.$store.dispatch('saveUserName',nickname);
                      storage.set('sex',sex);
                      storage.set('email',email);
                      storage.set('mobile',mobile);
                      this.datainit()
                    }       
                });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
      }
    },
     mounted () {
	      this.datainit()    
	  }
  }
	    
</script>

<style scoped>
.userform{
	position: relative;
}
	.userform .el-form-item{
    margin-bottom: 35px;
  } 
  .genderbox .el-radio{
	margin-right: 100px;
  }
  .gendericon{
    display: inline-block;
    width: 15px;
    height: 15px;
  	font-size: 26px;
  	position: absolute;
  	bottom:186px;
  	left:124px;
  }
  .el-icon-female{
  	margin-left: 135px;
  }
  .userform >>>.el-input__suffix{
  	right:484px;
  }
  .userform >>>.el-input .el-input__clear{
  	font-size: 18px;
  	color: #666;
  }
  .userform >>>.el-form-item__error{
    top:112%;
  }
</style>